/*
  学习目标：受控组件-hooks版
  步骤：
     1. state控制value或checked属性
     2. onChange配合setState修改状态
*/

import React from 'react';
import { useState } from 'react';

// 3. 封装自定义hooks
function useControl() {
  // 1. 声明状态
  const [value, setValue] = useState();

  // 2. 监听onChange
  function onChange(e) {
    setValue(e.target.value);
  }

  // 3. 对外返回value和onChange
  return {
    value,
    onChange,
  };
}

export default function App() {
  const { value, onChange } = useControl();
  return (
    <div>
      <input type="text" value={value} onChange={onChange} />
      <Child></Child>
    </div>
  );
}

function Child() {
  const { value, onChange } = useControl();
  return (
    <div>
      <h1>Child</h1>
      <input type="text" value={value} onChange={onChange} />
    </div>
  );
}
